<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>基金档案--理财型</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/mui.picker.min.css" />
		<link rel="stylesheet" href="../css/public.css" />
		<link rel="stylesheet" href="../css/fund_details.css">
	</head>
	<body>
		<header id="header" class="mui-bar mui-bar-nav jjs-header">
			<h2 class="mui-title">基金档案</h2>
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left header-left-result"></a>
			<a class="mui-icon mui-icon-bars mui-pull-right header-right"></a>
		</header>
		<div class="mui-content pur-content file-content">
			<div class="per-wrapper">
				<div class="mui-table-view pur-item">
				    <div class="mui-table-view-cell">
				        <span class="wrapper-title mui-navigate-right"><i></i>基金涨幅</span>
				    </div>
				    <div class="wrapper-bottom">
				    	<div class="mui-row wrapper-list">
					        <div class="mui-col-sm-12 mui-col-xs-12">
					            <div class="mui-table-view-cell">
									<i class="average"></i>2017-10-13更新
					            </div>
					        </div>
					    </div>
					    <table class="mui-table">
					    	<thead>
					    		<tr>
					    			<th>类型</th>
					    			<th>今年以来</th>
					    			<th>近一周</th>
					    			<th>近6个月</th>
					    			<th>近三年</th>
					    		</tr>
					    	</thead>
					    	<tbody>
					    		<tr>
					    			<td>区间回报</td>
					    			<td>20.46%</td>
					    			<td>1.58%</td>
					    			<td>12.46%</td>
					    			<td>12.46%</td>
					    		</tr>
					    		<tr>
					    			<td>同类平均</td>
					    			<td>20.46%</td>
					    			<td>1.58%</td>
					    			<td>12.46%</td>
					    			<td>12.46%</td>
					    		</tr>
					    		<tr>
					    			<td>泸深300</td>
					    			<td>20.46%</td>
					    			<td>1.58%</td>
					    			<td>12.46%</td>
					    			<td>12.46%</td>
					    		</tr>
					    		<tr>
					    			<td>同类排行</td>
					    			<td>20.46%</td>
					    			<td>1.58%</td>
					    			<td>12.46%</td>
					    			<td>12.46%</td>
					    		</tr>
					    	</tbody>
					    </table>
					</div>
				</div>
			</div>
			<div class="per-wrapper">
				<div class="mui-table-view pur-item">
				    <div class="mui-table-view-cell">
				        <span class="wrapper-title"><i></i>资产配置</span>
				        <span class="wrapper-time"  id="showUserPicker">数据截止日期：<span id="userResult">2017-06-30</span></span>
				    </div>
				    <div class="wrapper-bottom file-bottom">
				    	<div class="mui-row ">
				    		<div class="mui-col-sm-6 mui-col-xs-6 file-bottom-list"><i></i>股票：80%</div>
				    		<div class="mui-col-sm-6 mui-col-xs-6 file-bottom-list"><i></i>银行存款：19.12%</div>
				    		<div class="mui-col-sm-6 mui-col-xs-6 file-bottom-list"><i></i>债券：80%</div>
				    		<div class="mui-col-sm-6 mui-col-xs-6 file-bottom-list"><i></i>其他：19.12%</div>
				    	</div>
				    	<div id="charts" class="file-charts"></div>
					</div>
				</div>
			</div>
			<div class="per-wrapper">
				<div class="mui-table-view pur-item">
				    <div class="mui-table-view-cell">
				        <span class="wrapper-title"><i></i>持有股份</span>
				        <span class="wrapper-time"  id="showUserPicker_shares">数据截止日期：<span id="userResult_shares">2017-06-30</span></span>
				    </div>
				    <div class="wrapper-bottom file-bottom">
				    	<div id="shares" class="file-charts"></div>
					</div>
				</div>
			</div>
		</div>
		<script src="../js/jquery.min.js"></script>
		<script src="../js/mui.min.js"></script>
		<script src="../js/public.js"></script>
		<script src="../js/mui.picker.min.js"></script>
		<script src="../js/echarts-all-3.js"></script>
		<script>
			(function($, doc) {
				$.init();
				$.ready(function() {
					//普通示例
					var userPicker = new $.PopPicker();
					userPicker.setData([
						{text:"2016-06-30"},
						{text:"2016-07-30"},
						{text:"2016-08-30"},
						{text:"2016-09-30"},
						{text:"2016-12-30"},
					]);
					var showUserPickerButton = doc.getElementById('showUserPicker');
					var userResult = doc.getElementById('userResult');
					showUserPickerButton.addEventListener('tap', function(event) {
						userPicker.show(function(items) {
							userResult.innerText = items[0].text
						});
					}, false);
					var showUserPickerButton_shares = doc.getElementById('showUserPicker_shares');
					var userResult_shares = doc.getElementById('userResult_shares');
					showUserPickerButton_shares.addEventListener('tap', function(event) {
						userPicker.show(function(items) {
							userResult_shares.innerText = items[0].text
						});
					}, false);
					
				});
			})(mui, document);
			
			//行业
			
			
			//资产
			charts()
			function charts(){
				var myChart = echarts.init(document.getElementById('charts'));
				option = {
				 	color:['#ffc63e', '#16b8e8','#f61555','#d7d8d9'],
				    series : [
				        {
				            name:'基金搜',
				            type:'pie',
				            radius : '55%',
				            center: ['50%', '50%'],
				            data:[
				                {value:3305, name:'股票'},
				                {value:310, name:'银行存款'},
				                {value:110, name:'债券'},
				                {value:210, name:'其他'},
				            ],
				            itemStyle: {
				                normal:{
				                     label : {
				                        show : false
				                    },
				                    labelLine : {
				                        show : false
				                    }
				                }
				            }
				        }
				    ]
				}
				myChart.setOption(option);
			}
			
			
			
			//持有股份
			shares()
			function shares(){
				var myChart = echarts.init(document.getElementById('shares'));
				 option = {
				    tooltip : {
				        trigger: 'axis'
				    },
				    legend: {
				        data:['机构','个人'],
				        icon:'circle',
				    },
				    calculable : true,
				    grid: {
		                left: '3%',
		                right: '4%',
		                bottom: '3%',
	                    top:'15%',
		                containLabel: true,
	                    height:'180px'
		            },
					color:['#fead31','#16b8e8'],
				    xAxis : [
				        {
				            type : 'category',
				            data : ['2017-10-11','2017-10-11','2017-10-11','2017-10-11'],
				             axisLabel:{
	                            interval:0,
	                            rotate:30
	                        }


				        }
				    ],
				    yAxis : [
				        {
				            type : 'value'
				        }
				    ],
				    series : [
				        {
				            name:'机构',
				            type:'bar',
				            data:[2.0, 4.9, 7.0, 23.2],
				        },
				        {
				            name:'个人',
				            type:'bar',
				            data:[2.6, 5.9, 9.0, 26.4],
				        }
				    ]
				};
				
				myChart.setOption(option);
			}
		</script>
	</body>
</html>